<template>
  <card-item :list="list" :data="cardData" />
</template>
<script>
  import { defineComponent, reactive, toRefs, computed } from 'vue';
  import { list } from '../static/trafficJam';
  import cardItem from './card-item.vue';
  import { useMapStore } from '@/store/modules/map';
  import { getCongestionCurve } from '@/api/analysis';

  export default defineComponent({
    components: { cardItem },
    setup() {
      const userStore = useMapStore();
      const state = reactive({
        cardData: {},
        map: computed(() => userStore.ownMap),
        list: list,
      });
      const selectAddMaker = (title) => {
        getCongestionCurve({ nodeId: 9093, areaName: title }).then((res) => {
          const { areaData, aroundRoadData } = res;
          state.list[1].subChildren = aroundRoadData;
          state.cardData = areaData[0];
          state.cardData.value5 = 0;
          getBoundary(res.areaInfo);
        });
      };
      const getBoundary = (areaInfo) => {
        const map = state.map;
        const bdary = new BMap.Boundary();
        var tem = [];

        tem = areaInfo[0].space.addBorder.split(',');
        const poits = [];
        const a = [];
        const b = [];
        tem.forEach((item, index) => {
          if ((index + 1) % 2 == 1) {
            a.push(item);
          } else {
            b.push(item);
          }
        });
        a.forEach((item, index) => {
          const point = new BMap.Point(a[index], b[index]);
          poits.push(point);
        });
        const bd = new BMap.Boundary();
        bd.get('', function (rs) {
          //清除 避免重复画区域
          // map.removeOverlay(map.getOverlays()[0]);
          const hole = new BMap.Polygon(poits, {
            fillColor: 'yellow',
            fillOpacity: 0.2,
          });
          if (areaInfo[0].space.addBorder) {
            map.addOverlay(hole);
          } else {
            // 绘制圆形
            let circleData = JSON.parse(areaInfo[0].space.addCircle);
            const centerPoint = new BMap.Point(circleData[0].centerPoint[0], circleData[0].centerPoint[1]); // 假设第一个点作为圆心
            const radius = circleData[0].radius; // 圆的半径，单位为米
            const circle = new BMap.Circle(centerPoint, radius, {
              fillColor: 'yellow',
              strokeColor: 'yellow',
              strokeWeight: 2,
              fillOpacity: 0.2,
            });
            map.addOverlay(circle);
          }
        });
      };
      return {
        ...toRefs(state),
        selectAddMaker,
      };
    },
  });
</script>
